import { useState, Fragment } from 'react'
import { Drawer, Radio, Row, Col } from 'antd';
import { 
  SettingOutlined,
  StarOutlined,
  StarFilled
} from '@ant-design/icons';
import { useRecoilState } from 'recoil'
import { settingState } from '../../store'

interface IProps {
  style?: any;
  children?: any;
}

export default function AboutMe (props: IProps) {
  const [visible, setVisible] = useState(false);
  const [theme, setTheme] = useRecoilState(settingState.themeAtom);

  const showDrawer = () => {
    setVisible(true);
  };
  const onClose = () => {
    setVisible(false);
  };

  const changeTheme = (e: any) => {
    console.log('radio checked', e.target.value);
    setTheme(e.target.value);
  };

  return (
    <Fragment>
      <SettingOutlined style={ props.style } onClick={ showDrawer } />

      <Drawer 
        title="设置" 
        placement="right" 
        visible={visible}
        closable={false}
        onClose={ onClose }
      >
        <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
       
          <Col className="gutter-row" span={ 12 } >

          </Col>
          <Col className="gutter-row" span={ 12 } >

          </Col>
        </Row>
        
        <Radio.Group onChange={ changeTheme } value={ theme }>
          <Radio value={'light'}>
            <StarOutlined />
          </Radio>
          <Radio value={'dark'}>
            <StarFilled />
          </Radio>
        </Radio.Group>
      </Drawer>
    </Fragment>
  );
}